<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时数据录入</title>
    <script type="text/javascript" src="../../res/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../../js/login_common.js"></script>
    <script type="text/javascript" src="../../res/layui/layui.js"></script>
    <script type="text/javascript" src="../../res/js/Tools.js"></script>
    <script type="text/javascript" src="../../res/js/base.js"></script>

    <link href="../../res/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        body{
            padding: 10px;
            background: #F7F7F7;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .values{
            width: 300px;
            height: 50px;
        }
        .zbs{
            overflow: hidden;
            padding: 10px;
            padding-left: 50px;
            padding-right: 50px;

        }
        .zhuShi{
            font-size: 10px;
            color: #00aced;
            font-weight:bold;
        }
        .zb:hover{
            color: #7f7f7f;
        }
        .zb{
            cursor:pointer;
        }




        /*加载动画*/
        #load {

            position:absolute;
            width:600px;
            height:36px;
            left:50%;
            top:40%;
            margin-left:-300px;
            overflow:visible;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            cursor:default;
            z-index: 10;
            /*display: none;*/
        }

        #load div {
            position:absolute;
            width:20px;
            height:36px;
            opacity:0;
            font-family:Helvetica, Arial, sans-serif;
            font-size: 30px;
            animation:move 2s linear infinite;
            -o-animation:move 2s linear infinite;
            -moz-animation:move 2s linear infinite;
            -webkit-animation:move 2s linear infinite;
            transform:rotate(180deg);
            -o-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            color: #6D70C4;
        }

        #load div:nth-child(2) {
            animation-delay:0.2s;
            -o-animation-delay:0.2s;
            -moz-animation-delay:0.2s;
            -webkit-animation-delay:0.2s;
        }
        #load div:nth-child(3) {
            animation-delay:0.4s;
            -o-animation-delay:0.4s;
            -webkit-animation-delay:0.4s;
            -webkit-animation-delay:0.4s;
        }
        #load div:nth-child(4) {
            animation-delay:0.6s;
            -o-animation-delay:0.6s;
            -moz-animation-delay:0.6s;
            -webkit-animation-delay:0.6s;
        }
        #load div:nth-child(5) {
            animation-delay:0.8s;
            -o-animation-delay:0.8s;
            -moz-animation-delay:0.8s;
            -webkit-animation-delay:0.8s;
        }
        #load div:nth-child(6) {
            animation-delay:1s;
            -o-animation-delay:1s;
            -moz-animation-delay:1s;
            -webkit-animation-delay:1s;
        }
        #load div:nth-child(7) {
            animation-delay:1.2s;
            -o-animation-delay:1.2s;
            -moz-animation-delay:1.2s;
            -webkit-animation-delay:1.2s;
        }

        @keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left: 41%;
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -moz-transform:rotate(-180deg);
                -webkit-transform:rotate(-180deg);
                -o-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-moz-keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left:41%;
                -moz-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -moz-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -moz-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-webkit-keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left:41%;
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -webkit-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-o-keyframes move {
            0% {
                left:0;
                opacity:0;
            }
            35% {
                left:41%;
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%;
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%;
                -o-transform:rotate(-180deg);
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        #loads{
            position: fixed;
            width: 100%;
            height: 100%;
            background: #F7F7F7;
            z-index: 998;
            /*display: none;*/
        }
        #loades{
            position: fixed;
            width: 100%;
            height: 100%;
            background: #F7F7F7;
            z-index: 998;
            display: none;
        }
    </style>
</head>
<body>
<!--<div id="loads">
    <div id="load">
        <div>G</div>
        <div>N</div>
        <div>I</div>
        <div>D</div>
        <div>A</div>
        <div>O</div>
        <div>L</div>
    </div>
</div>-->
<form class="layui-form" action="" lay-filter="example">
    <input id="batchId" type="hidden" name="batchId">
    <input type="hidden" name="sportId" id="sportId">
    <input type="hidden" name="sportName" id="sportName">
    <div style="height: 30px;background: #00aced;margin-bottom: 10px;color: white;line-height: 30px;padding-left: 10px">
        请输入录入批次和选择对应的运动员
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">运动员</label>
            <div class="layui-input-inline">
                <select id="athlete" lay-filter="athlete" name="athlete" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                </select>
            </div>
        </div>

    </div>
    <div style="height: 30px;background: #00aced;margin-bottom: 10px;color: white;line-height: 30px;padding-left: 10px">
        以下所有信息均为必填（可暂存）
    </div>
<div class="overZhiBiao">

</div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="button" class="layui-btn" id="temporaryDataSubmit" value="暂存" />
            <input type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1" id="dataSubmit" value="立即提交">
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'layedit', 'laydate','element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit;
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            required: function(value){
                if(value.length < 1){
                    return '输入不能为空';
                }
            }
        });
        //监听提交
        form.on('submit(demo1)', function(){
            /*$("#loads").show();*/
            layer.confirm('确认提交吗?', function(index) {
                var indexLoad = layer.load(2, {
                    shade: [0.8, '#ccc'] //0.1透明度的白色背景
                });//0代表加载的风格，支持0-2
            //loading层
            /*var index = layer.load(1, {
                shade: [0.9,'#f00'] //0.1透明度的白色背景
            })*/;

            $("#dataSubmit").prop("disabled",true);
            $("#temporaryDataSubmit").prop("disabled",true);
            $("#dataSubmit").val("正在提交");
            submitAtsData(1,index)
            })
            return false;
        });
        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function(){
            form.val('example', {
                "username": "贤心" // "name": "value"
                ,"password": "123456"
                ,"interest": 1
                ,"like[write]": true //复选框选中状态
                ,"close": true //开关状态
                ,"sex": "女"
                ,"desc": "我爱 layui"
            });
        });


        form.on('select(athlete)', function (data) {
            var url =getRootPath()+"atsData/atsDataCompare";
            var datas={athleteId:data.value,batchName:$("#batchName").val()}
            $.post(url,datas,function (obj) {
                if(obj.num==1){
                    //第三方扩展皮肤
                    layer.alert(obj.msg, {
                        icon: 3,
                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    })
                }
            },"json")
        });

        var element = layui.element;
        element.init();


    });
</script>
<script type="text/javascript">
    $.ajaxSetup({
        async: false
    });

    //用于打印树状表单html
    var overZhiBiao ="";
    //计算指标等级
    var grade=0;
    $(function () {

        //查询所有的运动员
        var url=getRootPath()+"atsData/selectAthleteAll";
        var data={coachId:loginObj.user.filId};

        $.ajax(
            {
                url:url,
                dataType:'json',
                async:false,
                data:data,
                success:function (obj) {
                    $("#athlete").html('<option value="">===请选择===</option>')
                    $.each(obj,function (index,item) {
                        $("#athlete").append('<option value="'+item.athleteId+'">'+item.athleteName+'</option>');
                    })
                    layui.use('element', function() {
                        var element = layui.element;
                        element.init();
                    });
                }
            }
        )
        /* $.post(url,data,function (obj) {

         },"json")*/

        /*var url="../../atsData/selectDateCount";
        $.post(url,null,function (obj) {
            var dates=new Date();
            $("#batchName").val(""+dates.format("yyyy-MM-dd")+"第"+(obj+1)+"次批次")
        },"json")*/

        //查询于体育项目对应的指标数据
        var sportId= getQueryString("sportId");

        var url=getRootPath()+"atsData/selectAtsBaseItem";
        var data={sportId:sportId};
        $.post(url,data,function (obj) {
            //打印树状表单html
            atsDatas(obj,grade,null);
            /*$("#loads").hide();*/

        })
        //atsDatas(atsData,grade,null)
        //给体育项目ID，名称赋值（方便一起提交）
        var url=getRootPath()+"atsData/selectAtsBaseSportById";
        var data={sportId:sportId};
        $.post(url,data,function (obj) {
            $("#sportId").val(obj.sportId);
            $("#sportName").val(obj.sportName);
        })

        //判断是否是修改操作
        var batchId= getQueryString("batchId");
        if(batchId != null && batchId != ''){

            var url= getRootPath()+"AtsDataBatch/findById";
            var data={batchId:batchId};
            $.post(url,data,function (obj) {
                $("#batchId").val(obj.batchId)
                $("#athlete").val(obj.athleteId)
                var url=getRootPath()+"atsData/atsDataByIdBatch";
                var data={batchId:obj.batchId};
                $.post(url,data,function (objs) {
                    $.each(objs,function (index,item) {
                        $("#zhiBiao_"+item.itemIds).val(item.valueFact);
                    })
                },"json")
            },"json")
        }else{
            //判断是否有暂存数据
            var url=getRootPath()+"atsData/atsDataGive";
            var data={sportId:sportId}
            $.post(url,data,function (obj) {
                if(obj){
                    $("#batchId").val(obj.batchId)
                    $("#athlete").val(obj.athleteId)
                    var url=getRootPath()+"atsData/atsDataByIdBatch";
                    var data={batchId:obj.batchId};
                    $.post(url,data,function (objs) {
                        $.each(objs,function (index,item) {
                            $("#zhiBiao_"+item.itemIds).val(item.valueFact);
                        })
                    },"json")
                }
            },"json")
        }






        //下拉监听
        atsDataReal()

        //监听暂存按钮2
        $("#temporaryDataSubmit").on("click",function () {
            /*  $("#loads").show();*/

            $("#dataSubmit").prop("disabled",true);
            $("#temporaryDataSubmit").prop("disabled",true);
            $("#temporaryDataSubmit").val("暂存中")
            submitAtsData(2)
        })
        layui.use('element', function() {
            var element = layui.element;
            element.init();
        });

    })


    /**
     * 提交表单
     **/
    function submitAtsData(msg,index) {

        //循环表单所有控件的值存入数组
        var numArr = [];
        var datas=$("input[type=text]");

        var athleteNames="";//运动员名称
        for(var i=0;i<datas.length;i++){
            if(i==0){
                athleteNames = datas[i].value;
            }else if(i==1){
                datas[i].value;
                numArr.push(datas[i].name.substr(8)+"_"+datas[i].value)
            }else{
                if(datas[i].value){
                    numArr.push(datas[i].name.substr(8)+"_"+datas[i].value)
                }
            }
        }
        console.info(numArr.length)
        if(numArr.length==0){
            numArr=null;
        }
        //提交数据到后台
        var url=getRootPath()+"atsData/addAtsData";
        var data={
            atsData:numArr
            ,athleteId:$("#athlete").val()
            ,sportId:$("#sportId").val()
            ,sprotName:$("#sportName").val()
            ,batchId:$("#batchId").val()
            ,athleteName:athleteNames
            ,isva:msg
        }
        $.post(url,data,function (obj) {
            if(obj.num==1){
                layer.close(index);
                layer.msg('增加成功');
                window.parent.location.reload();//刷新父页面
            }else{
                window.parent.location.reload();//刷新父页面
                layer.msg('增加失败，为添加任何指标，请手动关闭当前页面并重试', {icon: 5});
            }
        },"json")
    }


    /**
     * 打印树状表单html（无限级）
     **/
    function  atsDatas(atsData,grade,ids) {
        grade++;
        $.each(atsData, function (index, item) {
            if (!ids) {
                ids = index;
            } else {
                ids = ids + "_" + index;
            }
            if (!$.isEmptyObject(item.children)) {
                overZhiBiao += "<div style='clear:both'></div><fieldset class='layui-elem-field layui-field-title zb' style='margin-top: 20px;' id='zb" + item.id + "'><legend>" + item.name + "<i class='layui-icon layui-icon-triangle-d'></i></legend></fieldset>";
                overZhiBiao += "<div id='zbs" + item.id + "' class='zbs'>";
                atsDatas(item.children, grade, ids);
                overZhiBiao += "</div>";
            } else {
                if (grade == 1) {
                    if (item.title != null) {
                        overZhiBiao += "<div class='values'><div class='layui-form-item'><label class='layui-form-label'>" + item.name + "</label><div class='layui-input-block'><input type='text' name='zhiBiao_" + item.id + "'  autocomplete='off' placeholder='" + item.title + "' class='layui-input loginPaDuan'></div></div></div>";
                    } else {
                        overZhiBiao += "<div class='values'><div class='layui-form-item'><label class='layui-form-label'>" + item.name + "</label><div class='layui-input-block'><input type='text' name='zhiBiao_" + item.id + "' id='zhiBiao_" + item.id + "'  autocomplete='off' placeholder='请输入指标' class='layui-input loginPaDuan'></div></div></div>";
                    }
                } else {
                    if (item.title != null) {
                        overZhiBiao += "<div class='values' style='float: left;'><div class='layui-form-item'><label class='layui-form-label'>" + item.name + "</label><div class='layui-input-block'><input type='text' id='zhiBiao_" + item.id + "' name='zhiBiao_" + item.id + "' autocomplete='off' placeholder='" + item.title + "' class='layui-input loginPaDuan'></div></div></div>";
                    } else {
                        overZhiBiao += "<div class='values' style='float: left;'><div class='layui-form-item'><label class='layui-form-label'>" + item.name + "</label><div class='layui-input-block'><input type='text' id='zhiBiao_" + item.id + "' name='zhiBiao_" + item.id + "' autocomplete='off' placeholder='请输入指标' class='layui-input loginPaDuan'></div></div></div>";
                    }
                }
            }
            $(".overZhiBiao").html(overZhiBiao);
        })
    }

    /**
     * 下拉监听
     */
    function atsDataReal() {
        //隐藏所有下拉数据
        //$(".zbs").hide();
        //监听控制所有下拉指标
        $(".zb").on("click",function () {
            $("#zbs"+$(this).prop('id').substr(2)).slideToggle(500);
            if($(this).find("i").prop("class")=="layui-icon layui-icon-triangle-d"){
                $(this).find("i").prop("class","layui-icon layui-icon-triangle-r")
            }else{
                $(this).find("i").prop("class","layui-icon layui-icon-triangle-d")
            }
        })

        $(".loginPaDuan").on("blur",function () {
            if(isNaN($(this).val())){
                layer.alert('只允许输入数字', {
                    icon: 2,
                    skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                })
                $(this).val("");
            }
        })
    }
</script>

</body>
</html>